
<template>
  <el-container style="height: 100%; ">
    <el-aside>
      <el-header style="border-bottom: 1px solid #eee; text-align:center; line-height: 60px;">
        <div style="font-size: 25px; color:#eee"><i class="el-icon-collection" />BookCity</div>
      </el-header>
      <el-menu router open="['0','1', '2','3','4']" background-color="#333744" text-color="#fff" active-text-color="#ffd04b">
        <el-submenu v-for="(item,index) in $store.getters.permission_routes" v-if="item.show" :key="item.id" :index="index + ''" aria-expanded="true">
          <template slot="title">{{ item.name }}</template>
          <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path" :class="$route.path==item2.path?'is-active':''">
            <i :class="item2.iconCls" />{{ item2.name }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="border-bottom: 1px solid #eee;text-align:center; line-height: 60px;background-color: #E4E7ED;">
        <span style="float: left; font-size: 25px"><i class="el-icon-s-operation" style="margin-right: 15px" />知遇书城</span>
        <div style="text-align: right; line-height: 60px;">
          <el-button type="info" size="medium" @click="registerAdmin"><i class="el-icon-s-custom" />管理员注册</el-button><el-button type="info" size="medium" @click="loginShop"><i class="el-icon-position" />书城首页</el-button>
          <el-button :style="{marginLeft: '20px'}" type="info" size="medium" @click="logout"><i class="el-icon-user" />退出</el-button>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  methods: {
    logout() {
      this.$store.dispatch('user/logout').then(() => {
        this.userName = 0
        this.userId = 0
        this.$message.success('已注销!')
        this.$router.push('/userLogin')
      }).catch(err => {
        this.$message.error(err.message) // 登录失败提示错误
      })
    },
    loginShop() {
      this.$router.push({ path: '/', name: 'index' })
    },
    registerAdmin() {
      this.$store.getters.roles.includes('admin') ? this.$router.push({ path: '/register', name: 'Register' }) : this.$message.error('您不具备admin权限！')
    }
  }
}
</script>

<style scoped>
 .el-menu{
        border-right-width:0;
    }
 .el-aside{
     /*border-right: 1px solid #eee;*/
     width: 200px;
     background-color: #333744;
 }
</style>
